<template>
  <div style="width: 85%; margin: auto; margin-top: -20px;">
    <el-carousel trigger="click" height="400px" >
      <el-carousel-item v-for="item in carouselList" :key="item">
        <img :src="item.carouselpath" style="height: 400px; width: 100%;"/>
      </el-carousel-item>
    </el-carousel>
  </div>
  <div style="width: 85%;margin: auto;">
    <div>
      <div style="margin: 10px 0">
        <el-input
        style="width: 200px; cursor: pointer"
        suffix-icon="el-icon-search"
        placeholder="请输入文章标题"
        v-model="articletitle"></el-input>
        <el-button type="primary" @click="getarticleList">搜 索</el-button>
      </div>
      <template v-if="articleList.length">
        <el-card v-for="article in articleList" :key="article.id" :article="article">
            <div class="article-avatar">
              <el-avatar :src="article.userphoto" :size="30"></el-avatar>
            </div>
            <div class="article-info">
              <span class="article-author">{{ article.useraccount }}</span>
              分类：<span class="article-time">{{ article.articletype}}</span>
            </div>
            <h1><span class="article-author" @click="toarticle(article.id)">{{ article.articletitle}}</span></h1>
            <div class="article-content">{{ article.articlemain }}</div>
            <div class="article-images">
              <el-image :src="article.articleimg" style="width: 400px;height: 300px;"></el-image>
            </div>
            <div class="article-actions">
              <span class="article-like" @click="save(article)">{{ article.isnum }} 点赞</span>
              <span style="margin-left: 82%;" @click="toarticle(article.id)">点击阅读文章详情</span>
            </div>
        </el-card>  
      </template>
      <!-- 分页区域 -->
        <div>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        v-model:current-page="pageNum"
        :page-sizes="[2, 5, 10, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "MainView",
  data() {
      return {
        articletitle : '',
        carouselList: [],
        articleList: [],
        pageNum: 1,
        pageSize: 10,
        total: 0,
        isnumyes : false,
      };
    },
    created() {
    this.getarticleList();
    this.getcarouselList();
  },
  methods: {
    save(article) {
      if(!this.isnumyes){
        article.isnum=article.isnum+1;
        this.isnumyes = true;
      }else{
        article.isnum=article.isnum-1;
        this.isnumyes = false;
      }
      this.$http.post("/article/", article).then((res) => {
            if (res.data.status == 200) {
                  this.getarticleList();
            } else {
              this.$message.error(res.data.message);
          }})
    },
    //跳转至详情页面
    toarticle(id){
      localStorage.setItem("articleid",id);
      this.$router.push('/articledetails')
    },
    handleSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.getarticleList();
    },
    handleCurrentChange(pageNum) {
      this.pageNum = pageNum;
      this.getarticleList();
    },
    getarticleList(){
      //请求分页查询数据
      let params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        articletitle: this.articletitle,
      }
      this.$http.get("/article/pages", { params }).then(res=>{
        if(res.data.status == 200){
          console.log(res);
          this.articleList = res.data.data.records;
          this.total = res.data.data.total;
        }else{
          this.$message.error(res.message);
        }
      })
    },
    getcarouselList() {
      this.$http.get("/carousel").then(res=>{
        if(res.data.status == 200){
          this.carouselList = res.data.data;
        }else{
          this.$message.error(res.data.message);
        }
      })
    }
  }
}
</script>
<style lang="scss">

.el-carousel__item{
  color: #475669;
  opacity: 0.75;
  line-height: 150px;
  background-color: rgb(228, 236, 236);
  margin: 0;
  text-align: center;
}
.article-card {
  margin-bottom: 20px;
}

.article-avatar {
  float: left;
  margin-right: 10px;
}

.article-info {
  line-height: 20px;
}

.article-author {
  font-weight: bold;
  margin-right: 10px;
}

.article-time {
  color: #999;
}

.article-content {
  margin-top: 10px;
  white-space: pre-wrap;
  word-break: break-word;
}

.article-images {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
}

.article-actions {
  margin-top: 10px;
  color: #999;
}
</style>